<template>
  <div class="cardreader-list">
    <Row type="flex" justify="space-between" class="coinrevenue-list-edit">
      <Form style="width: 100%" class="from" :model="searchObj" label-position="left" inline>
        <Row type="flex" justify="start" inline>
          <Col span="24">
            <Row>
              <!-- <Col>
              </Col>-->
              <FormItem :label-width="48">
                <div slot="label" style="transform: translateX(12px);">门店：</div>
                <!-- <Select
                  class="select-shop-item"
                  v-model="searchObj.orgId"
                  filterable
                  @on-change="handleShop"
                  :max-tag-count="1"
                  :max-tag-placeholder="maxTagPlaceholder"
                  style="width:180px"
                >
                  <Option
                    v-for="item in shopList"
                    :value="item.shopId"
                    :key="item.shopId"
                  >{{ item.shopName }}</Option>
                </Select> -->
                <vueTreeselectChoice

                  @input="handleShop"
                  :clearable="false"
                   @on-api-finish='searchObj.orgId = $route.query.id'
                  permissionCode="moms:report:smartdevicetakecardmonitor"
                  v-model="searchObj.orgId"
                ></vueTreeselectChoice>
              </FormItem>

              <FormItem :label-width="48">
                <div slot="label" style="transform: translateX(12px);">时间：</div>
                <datePickerYmd
                  @on-change="search"
                  :selectDateType.sync="selectDateType "
                  v-model="timeDate"
                  :dateOption="dateOption"
                  ref="datePickerYmd"
                ></datePickerYmd>
              </FormItem>

              <FormItem>
                <Button type="primary" class="coinrevenue-btn" @click="search">查询</Button>
                <Button style="margin-left: 10px" class="coinrevenue-btn" @click="reset">重置</Button>
              </FormItem>
            </Row>
            <Row></Row>
          </Col>

        </Row>
      </Form>
    </Row>
    <!-- :loading="isloading" -->
    <Row type="flex" justify="start">
      <Col span="20" class="status">
        <span class="padding-right">成功率：{{statusCount.ratio  }}</span>
        <i class="border"></i>
        <span class="padding-left">
          成功次数：
          <i class="status-i">{{statusCount.success || 0}}</i>
        </span>
        <span>
          失败次数：
          <i class="status-i">{{statusCount.fail || 0}}</i>
        </span>
        <!-- <span>
          机台总数：
          <i class="status-i">150</i>
        </span>
        <i class="border"></i>

        <span class="padding-left">
          <i class="iconsys iconshuoming"></i> 机台总数：117
        </span>-->
      </Col>

      <Col span="4">
        <Row type="flex" justify="end" style="margin-right: 30px;">
          <Col>
            <!-- <Button type="primary">出卡监控</Button> -->
          </Col>
        </Row>
      </Col>
    </Row>
    <Table border :loading="isloading" stripe ref="rowSpanTable" :columns="columns" :data="resData"></Table>
    <div class="page-box" style="margin-top: 20px">
      <Page
        :total="total"
        ref="pages"
        :current.sync='searchObj.pageIndex'
        :page-size="searchObj.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </div>
    <Modal width="294" v-model="modalMachineShow" title="机台配置">
      <section class="modalMachine">
        <Row v-for="index in 9" :key="index">
          <Col span="12">
            <Row type="flex" justify="start" class="code-row-bg">
              <Col>固定中奖率</Col>
            </Row>
          </Col>
          <Col span="12">
            <Row type="flex" justify="end" class="code-row-bg">
              <Col>18</Col>
            </Row>
          </Col>
        </Row>
        <!-- <div v-for="index in 9" :key="index">
          <span>固定中奖率</span>
          <span>18</span>
        </div>-->
      </section>
      <footer slot="footer">
        <Button @click=" modalMachineShow = false">取消</Button>
        <Button type="primary">导出</Button>
      </footer>
    </Modal>
  </div>
</template>
<script>
// import { rowSpanTable, formatRowspanData } from '@/libs/rowspan'
import { machineDetailStatus, machineDetailList } from '@/api/report/hardware'
import datePickerYmd from '@/components/date-picker-ymd/date-picker-ymd.vue'
import dayjs from 'dayjs'
import { Decimal } from 'decimal.js'
import errorCaptured from '@/libs/errorCaptured'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
export default {
  name: 'report_hardware_machine_card',
  components: {
    datePickerYmd,
    vueTreeselectChoice
  },
  data () {
    return {
      shopList: [],
      total: 0,
      isloading: false,
      bottonActive: '日',
      selectDateType: 'daterange',
      timeDate: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 00:00:00')],
      dateOption: {
        disabledDate (date) {
          return dayjs(date).isAfter(dayjs(new Date()))
        }
      },
      searchObj: {
        offset: 0,
        limit: 10,

        pageIndex: 1,
        dateTimes: new Date(),
        dateRange: [new Date(), new Date()],
        orgId: undefined, // 'e4ef2e0a-0c51-4023-8aaa-487b40493464' ||
        merchantId: this.$store.state.user.merchantId
      },
      // 状态

      shosMoreSearch: false,
      // 状态统计
      statusCount: {},
      model10: [],
      columns: [
        { type: 'index', width: 80, align: 'center', title: '序号' },
        { title: '门店名称', key: 'shopName', align: 'center' },
        { title: '设备名称', key: 'deviceName', align: 'center' },
        { title: '成功次数', key: 'success', align: 'center' },
        { title: '失败次数', key: 'fail', align: 'center' },
        {
          title: '成功率',
          key: 'ratio',
          align: 'center',
          render: (h, params) => {
            // new Decimal(statusCount.ratio).div(res.data.data.length).mul(100).toFixed(2) + '%'
            return h('span', `${new Decimal(params.row.ratio).mul(100).toFixed(2)}%`)
          }
        }
      ],
      resData: [],
      // 机台配置数据
      modalMachineData: [{ key: 'fixation', title: '固定中奖率', value: '18' }],
      modalMachineShow: false,
      modalMachineSolumns: [
        { title: '门店名称', key: 'createPosName', align: 'center' },
        { title: '机台分类', key: 'targetCardNo', align: 'center' }
      ]
    }
  },
  computed: {
    dateFormat () {
      if (this.bottonActive === '日') return 'yyyy-MM-dd'
      return 'yyyy-MM'
    },
    dateType () {
      if (this.bottonActive === '日') return 'date'
      return 'month'
    },
    startDate () {
      return this.timeDate[0]
    },
    endDate () {
      if (this.selectDateType === 'daterange') return dayjs(this.timeDate[1]).add(1, 'day').format('YYYY-MM-DD 00:00:00')
      return this.timeDate[1]
    }
  },
  async created () {
    // console.log(this.$route.query.id)
    // this.machineDetailList()
    // this.machineDetailStatus()
  },
  mounted () {},
  methods: {
    maxTagPlaceholder (num) {
      return '...'
    },
    handlePage (val) {
      this.searchObj.offset = (val - 1) * this.searchObj.limit
      this.machineDetailList()
    },
    handlePageSize (val) {
      this.searchObj.limit = val
      this.searchObj.pageIndex = 1
      this.machineDetailList()
    },

    // 列表查询
    async machineDetailList () {
      let params = {
        orgId: this.searchObj.orgId || this.$store.state.user.orgId,
        merchantId: this.searchObj.merchantId,
        startDate: this.startDate,
        endDate: this.endDate,
        offset: this.searchObj.offset,
        limit: this.searchObj.limit
      }
      // 列表查询
      let [err, res] = await errorCaptured(machineDetailList, params)
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      this.resData = res.data.data || []
      this.total = res.data.totalCount || 0
    },
    async machineDetailStatus () {
      let params = {
        orgId: this.searchObj.orgId || this.$store.state.user.orgId,
        merchantId: this.searchObj.merchantId,
        startDate: this.startDate,
        endDate: this.endDate
      }
      let [err, res] = await errorCaptured(machineDetailStatus, params)
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      let statusCount = {
        fail: 0,
        success: 0,
        total: 0
      }
      if (res.data && res.data.data && res.data.data.length) {
        res.data.data.forEach(item => {
          Object.keys(statusCount).forEach(key => {
            statusCount[key] = new Decimal(statusCount[key]).add(item[key]).toNumber()
          })
        })
        // debugger
        if (statusCount.total) {
          statusCount.ratio = new Decimal(statusCount.success).div(statusCount.total).mul(100).toFixed(2) + '%'
        } else {
          statusCount.ratio = '100%'
        }
      } else {
        statusCount.ratio = '100%'
      }
      // debugger
      this.statusCount = statusCount
    },
    search () {
      this.searchObj.offset = 0
      this.searchObj.pageIndex = 1
      this.machineDetailList()
      this.machineDetailStatus()
    },
    handleShop () {
      this.searchObj.offset = 0
      this.searchObj.pageIndex = 1
      this.machineDetailStatus()
      this.machineDetailList()
    },
    // 重置
    reset () {
      this.searchObj = {
        offset: 0,
        limit: 10,
        pageIndex: 1,
        orgId: this.$route.query.id,
        merchantId: this.$store.state.user.merchantId
      }
      this.selectDateType = 'daterange'
      this.timeDate = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 00:00:00')]
      this.$refs.datePickerYmd.reset(this.timeDate)
      this.machineDetailStatus()
      this.machineDetailList()
    }
  }
}
</script>
<style lang="less" scoped>
.cardreader-list {
  min-width: 1100px;
  i{
    font-style: normal;
  }
  // .from {
  //   margin-top: 24px;
  // }
  .coinrevenue-list-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .button_active {
    border: 1px solid #2d8cf0;
  }
  .status {
    height: 52px;
    line-height: 32px;

    font-size: 12px;
    color: #464c5b;
    letter-spacing: 0;
    text-align: justify;
    display: flex;
    padding: 0 10px 10px 20px;
    span {
      // padding: 0 10px;
      padding-left: 10px;
      padding-right: 10px;
      display: flex;
      align-items: center;
    }
    .padding-left {
      padding-left: 20px;
    }
    .padding-right {
      padding-right: 20px;
    }
    .border {
      border-left: 1px solid #979797;
      height: 16px;
      align-self: center;
    }
    .status-i {
      height: 20px;
      padding: 0 10px;
      display: block;
      background: #ffffff;
      // border: 1px solid #2d8cf0;
      border-radius: 10px;
      line-height: 20px;
      font-style: none;
    }
    .iconshuoming {
      color: orange;
      margin-right: 3px;
    }
  }
}
.modalMachine {
  padding: 0 20px;
}
</style>
